//加载模块
layui.use(function() { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
    //得到各种内置组件
    var layer = layui.layer //弹层
        , laypage = layui.laypage //分页
        , laydate = layui.laydate //日期
        , table = layui.table //表格
        , carousel = layui.carousel //轮播
        , upload = layui.upload //上传
        , element = layui.element //元素操作
        , slider = layui.slider //滑块
        , dropdown = layui.dropdown //下拉菜单

    //向世界问个好
    layer.msg('Hello World');

    //监听Tab切换
    element.on('tab(test)', function (data) {
        layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
            tips: 1
        });
    });
})

// 访问地址
let basePath = $("#basePath").val();
let path = basePath + "/StudentfindAll1";


layui.use('table', function(){
    var table = layui.table;

    table.render({
        elem: '#test'
        ,url:path
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,title: '用户数据表'
        ,cols: [
            [ //表头
                {
                    field: 'stuNum',
                    title: '学号',
                    width: 80,
                    sort: false,
                    fixed: 'left'
                }, {
                field: 'stuName',
                title: '学生姓名',
                width: 80
            }, {
                field: 'mobile',
                title: '手机号',
                width: 140,
                sort: false
            }, {
                field: 'sex',
                title: '性别',
                width: 80
            }, {
                field: 'age',
                title: '年龄',
                width: 50
            }, {
                field: 'idType',
                title: '证件类型',
                width: 160,
                sort: false
            }, {
                field: 'idNum',
                title: '证件号码',
                width: 160,
                sort: false
            }, {
                field: 'birthday',
                title: '出生日期',
                width: 140
            }, {
                field: 'province',
                title: '籍贯',
                width: 135
            }, {
                field: 'createDate',
                title: '创建时间',
                width: 135,
                sort: false
            }, {
                field: 'updateDate',
                title: '修改时间',
                width: 135,
                sort: false
            }, {
                fixed: 'right',
                width: 150,
                align:'center',
                toolbar: '#barDemo'
            }
            ]
        ],
        done: function(res, curr, count) {
            // 性别
            $("[data-field='sex']").children().each(function() {
                if ($(this).text() == 'M') {
                    $(this).text('男');
                } else if ($(this).text() == 'F') {
                    $(this).text('女');
                }
            });

            $("[data-field='idType']").children().each(function() {
                if ($(this).text() == 'C') {
                    $(this).text('身份证');
                } else if ($(this).text() == 'X') {
                    $(this).text('香港身份证');
                } else if ($(this).text() == 'A') {
                    $(this).text('澳门身份证');
                }
            });

            $("[data-field='birthday']").children().each(function() {
                var birthday = $(this).text();
                if (birthday.indexOf('出生日期') == -1) {
                    $(this).text(getYMDHMS(parseInt(birthday)));
                }
            });

            $("[data-field='createDate']").children().each(function() {
                var birthday = $(this).text();
                if (birthday.indexOf('创建时间') == -1) {
                    $(this).text(getYMDHMS(parseInt(birthday)));
                }
            });

            $("[data-field='updateDate']").children().each(function() {
                var birthday = $(this).text();
                if (birthday.indexOf('修改时间') == -1) {
                    $(this).text(getYMDHMS(parseInt(birthday)));
                }
            });

        }
        ,page: true
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
            case 'add':
                layer.msg('添加');
                break;
            case 'update':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else if(data.length > 1){
                    layer.msg('只能同时编辑一个');
                } else {
                    layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
                break;
            case 'delete':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else {
                    layer.msg('删除');
                }
                break;
        };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'more'){
            //下拉菜单
            dropdown.render({
                elem: this //触发事件的 DOM 对象
                ,show: true //外部事件触发即显示
                ,data: [{
                    title: '编辑'
                    ,id: 'edit'
                },{
                    title: '删除'
                    ,id: 'del'
                }]
                ,click: function(menudata){
                    if(menudata.id === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    } else if(menudata.id === 'edit'){
                        layer.msg('编辑操作，当前行 ID:'+ data.id);
                    }
                }
                ,align: 'right' //右对齐弹出（v2.6.8 新增）
                ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
            })
        }
    });

    //执行一个轮播实例
    carousel.render({
        elem: '#test1'
        ,width: '100%' //设置容器宽度
        ,height: 200
        ,arrow: 'none' //不显示箭头
        ,anim: 'fade' //切换动画方式
    });

    //将日期直接嵌套在指定容器中
    var dateIns = laydate.render({
        elem: '#laydateDemo'
        ,position: 'static'
        ,calendar: true //是否开启公历重要节日
        ,mark: { //标记重要日子
            '0-10-14': '生日'
            ,'2020-01-18': '小年'
            ,'2020-01-24': '除夕'
            ,'2020-01-25': '春节'
            ,'2020-02-01': '上班'
        }
        ,done: function(value, date, endDate){
            if(date.year == 2017 && date.month == 11 && date.date == 30){
                dateIns.hint('一不小心就月底了呢');
            }
        }
        ,change: function(value, date, endDate){
            layer.msg(value)
        }
    });

    //分页
    laypage.render({
        elem: 'pageDemo' //分页容器的id
        ,count: 1000 //数据总数
        ,limit: 10 //每页显示的数据条数
        ,skin: '#1E9FFF' //自定义选中色值
        //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
        ,jump: function(obj, first){
            if(!first){
                layer.msg('第'+ obj.curr +'页', {offset: 'b'});
            }
        }
    });

    //上传
    upload.render({
        elem: '#uploadDemo'
        ,url: 'https://httpbin.org/post' //改成您自己的上传接口
        ,done: function(res){
            layer.msg('上传成功');
            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
            console.log(res)
        }
        ,before: function(){
            layer.msg('上传中', {icon: 16, time: 0});
        }
    });

    //滑块
    var sliderInst = slider.render({
        elem: '#sliderDemo'
        ,input: true //输入框
    });

    //底部信息
    var footerTpl = lay('#footer')[0].innerHTML;
    lay('#footer').html(layui.laytpl(footerTpl).render({}))
        .removeClass('layui-hide');
});